<template>
  <div class="">
  <ul class="detail-bottom">
    <li class="bottom-top" @click="selectAllMusic">
      <div class="bottom-icon"></div>
      <div class="bottom-title">全部播放</div>
    </li>
    <li v-for="(value,index) in playlist" :key="value.id" class="item" @click="selectMusic(value.id)">
      <div><h2>{{index + 1}}</h2></div>
      <div>
        <h3>{{ value.name }}</h3>
        <p>{{ value.al.name }} - {{ value.ar[0].name }}</p>
      </div>
    </li>
  </ul>
    <p class="footer-text">- 我也是有底线的 -</p>
  </div>
</template>

<script>
import {mapActions} from "vuex"

export default {
  name: "DetailBottom",
  props: {
    playlist: Array
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'setMiniPlayer',
      'getSongDetail'
    ]),
    selectMusic(id) {
      // this.$store.dispatch('setFullScreen', true)
      //显示播放界面和隐藏迷你播放器
      this.setFullScreen(true);
      this.setMiniPlayer(false);
      //发送请求
      this.getSongDetail([id]);
    },
    selectAllMusic() {
      this.setFullScreen(true);
      this.setMiniPlayer(false);
      //获取所有的id
      let ids = this.playlist.map((item) => {
        return item.id
      })
      //发送请求
      this.getSongDetail([ids]);
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/variable";
@import "../../assets/css/mixin";

.detail-bottom {
  width: 100%;
  //padding-bottom: 120px;

  li {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    @include bg_sub_color();
    border-bottom: 1px solid #ccc;
  }

  .bottom-top {
    display: flex;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    height: 100px;

    .bottom-icon {
      width: 60px;
      height: 60px;
      @include bg_img("../../assets/images/small_play")
    }

    .bottom-title {
      @include font_size($font_large);
      @include font_color();
      padding-left: 20px;
    }
  }

  .item {
    padding:  20px;
    display: flex;
    align-items: center;
    @include font_size($font_large);
    @include font_color();
    @include no-wrap();
    h2{
      width: 50px;
      font-weight: bold;
      @include font_active_color();
      margin-right:30px;
      text-align: center;
    }
    p {
      @include font_size($font_medium);
      @include font_color();
      opacity: 0.8;
      margin-top: 10px;
    }
  }
}
</style>
